<template>
    <section style="padding: 24px; background:#fff;">
        <div v-if="userInfo!==null">
            <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-form-item label="用户Id">
                    <a-input v-model="userInfo.id" :readOnly="checkDetil" />
                </a-form-item>
                <a-form-item label="邮箱" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                    <a-row :gutter="[16,16]">
                        <a-col :span="18">
                            <a-input v-model="userInfo.email" :readOnly="checkDetil"></a-input>
                        </a-col>
                        <a-col :span="6">
                            <a-button type="primary" @click="toUpdateEmailPage">修改邮箱</a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" label="头像">
                    <span @click="showAvatarDialog" class="avatat-box">
                        <a-avatar :src="userInfo.avatar" :size="60" />
                    </span>
                </a-form-item>
                <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" label="用户名">
                    <a-input v-model="userInfo.userName" autocomplete="off"></a-input>
                </a-form-item>
                <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" label="签名">
                    <a-input v-model="userInfo.sign" autocomplete="off"></a-input>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 8 }">
                    <a-button type="primary" html-type="submit" @click="handleSubmit">
                        更新
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div>
            <avatar-upload field="file" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" v-model="showAvatarCutter" :width="300" :height="300" :params="params" url="/admin/images/upload" img-format="png">
            </avatar-upload>
        </div>
    </section>
</template>

<script>
import { checkToken, updateUserInfo, checkUserName } from '@/api/api'
import avatarUpload from 'vue-image-crop-upload/upload-2.vue';
export default {
    components: {
        'avatar-upload': avatarUpload
    },
    data() {
        return {
            userInfo: {},
            showAvatarCutter: false,//头像裁剪框
            params: { original: 'avatar' },
            lastUserName: '',
            checkDetil: true,

        };
    },
    methods: {
        showAvatarDialog() {
            this.showAvatarCutter = true;
        },
        cropUploadFail() {
            this.$message.error('头像上传失败');
        },
        cropUploadSuccess(response) {
            // this.showAvatarCutter = false;
            if (response.code === 200) {
                this.$message.success(response.message);
                this.userInfo.avatar = response.data;
            } else {
                this.$message.error(response.message);
            }
        },
        //修改邮箱
        toUpdateEmailPage() {
            this.$router.push('/settings/email');
        },
        getUserInfo() {
            checkToken().then(res => {
                if (res.code === 200) {
                    this.userInfo = res.data;
                    this.lastUserName = this.userInfo.userName;
                }
            })
        },
        handleSubmit() {
            //校验数据
            //检查数据
            if (this.userInfo.userName === '') {
                this.$message.error('用户名不可以为空');
                return;
            }
            //检查用户名是否重复
            if (this.lastUserName === this.userInfo.userName) {
                //如果用户没有修改用户名直接走更新用户信息方法
                this.doUpdateInfo();
            } else {
                checkUserName(this.userInfo.userName).then(result => {
                    if (result.code === 500) {
                        this.doUpdateInfo();
                    } else {
                        this.$message.error('用户名已存在');
                    }
                });
            }
        },
        doUpdateInfo() {
            if (this.userInfo.avatar === '') {
                this.$message.error('头像不可以为空');
                return;
            }
            updateUserInfo(this.userInfo, this.userInfo.id).then(res => {
                if (res.code === 200) {
                    this.$message.success('更新成功!');
                    window.location.reload();
                } else {
                    this.$message.error(res.message);
                }
            })
        },

    },
    mounted() {
        this.getUserInfo();
    },
};
</script>
<style scoped>
.avatat-box {
    cursor: pointer;
}
</style>